<template>
	  <div>
	    <el-tabs type="border-card">
	      <!-- 展示在租的车位 -->
	      <el-tab-pane label="所有车位">
	        <!-- 条件筛选框 -->
	        <el-form
	          :inline="true"
	          :model="form"
	          ref="form"
	          class="demo-form-inline">
	          <el-form-item label="选择小区" prop="community">
	            <el-select v-model="form.communityId" placeholder="请选择小区">
	              <el-option
	                v-for="item in communitys"
	                :key="item.communityId"
	                :label="item.communityName"
	                :value="item.communityId"
	              >
	              </el-option>
	            </el-select>
	          </el-form-item>
			  车位状态<el-select v-model="param.state01" placeholder="选择车位状态">
			      <el-option
			              v-for="item in CartState"
			              :key="item.value"
			              :label="item.label"
			              :value="item.value">
			          <span style="">{{ item.label }}</span>
			      </el-option>
			  </el-select>
	          <el-form-item label="出租类型">
	            <el-select v-model="form.typeId" placeholder="选择类型">
	              <el-option label="时租" value=1></el-option>
	              <el-option label="日租" value=2></el-option>
	              <el-option label="长期" value=3></el-option>
				  <el-option label="所有" value=0></el-option>
	            </el-select>
	          </el-form-item>
	          <el-form-item>
	            <el-button
	              type="primary"
	              plain
	              :disabled="false"
	              @click="queryCart('form')"
	              >搜索</el-button
	            >
	          </el-form-item>
	        </el-form>
	        <el-table :data="tableData" style="width: 95%">
	          <el-table-column label="车位图" prpo="image" width="180">
	            <!-- 插入车位图片 -->
	            <template slot-scope="scope">
	              <img :src="scope.row.image" min-width="70" height="70" />
	            </template>
	            <!-- <img style="width: 130px; height: 80px" :src="this.tableData.image" /> -->
	          </el-table-column>
	          <el-table-column prop="releaseTime" label="出租时间" :formatter="setDate" width="180">
	          </el-table-column>
	          <el-table-column prop="typeInfoId" label="价格" width="180">
	          </el-table-column>
	          <el-table-column prop="address" label="地址"> </el-table-column>
	          <el-table-column prop="available" label="当前状态" :formatter="stateFormatter"> </el-table-column>
	          <!-- 添加操作按钮 -->
	          <el-table-column label="操作" align="center" min-width="100">
	            　<template slot-scope="scope">
	              <!-- 　　　　　　<el-button type="text">查看详情</el-button> -->
	              　<el-button v-if="scope.row.available==1" type="primary" @click="updateState(scope.row)">冻结车位</el-button>
					<el-button v-if="scope.row.available==0" type="primary" @click="updateState(scope.row)">解冻车位</el-button>
	              　</template>
	            　　</el-table-column>
	        </el-table>
	      </el-tab-pane>
	      <el-pagination
	        background
	        layout="prev, pager, next"
	        :total="page.total"
	        :current-page="page.current"
	        :page-size="page.size"
			@next-click="next" @prev-click="prev" @current-change='search'>
	      </el-pagination>
	    </el-tabs>
	  </div>

</template>
<script>
	import moment from 'moment';
	import $ from "jquery";
	
	export default {
	  name: "index",
	  data() {
	    return {
	      imgList: [],
	      page: {
	        total: 10,
	        current: 1,
	        size: 5,
	      },
	      value: [],
	      communitys: [{value:0,label:"所有"},{value:1,label:"未知小区"},{value:2,label:"未知小区"},],
	      form: {
	        typeId: 0,
	        communityId: 0,
	      },
	      // 保存全部车位信息的数组，添加数据即可展示到首页
	      tableData: [],
	      formLabelWidth: "120px",
		  CartState:[{value:0,label:"不可使用车位"},{value:1,label:"可使用车位"},{value:2,label:"所有"},],
		  paramsend:{pageNum: 0, pageSize: 5, total: 0, current: 1,name01:"",state01:2,},
		  param: {pageNum: 0, pageSize: 5, total: 0, current: 1,name01:"",state01:2,},
	    };
	  },
	  mounted() {
		this.queryCart();
	  },
	  methods: {
	    queryCart() {
	      //分页的页码
	      let current = this.page.current;
	      //分页的size
	      let size = this.page.size;
	      //出租车位剩余的时间（String类型，传递到后台再进行判断）
	      let typeId = this.form.typeId;
	      let communityId = this.form.communityId;
		  let fthis=this;
	      this.$http
	        .get("/cart/showCart", {
	          params: {
	            current: current,
	            size: size,
	            typeId: typeId,
	            communityId: communityId,
				available:fthis.param.state01
	          },
	        })
	        .then((resp) => {
	          // console.log(resp);
			  this.page.size = resp.data.obj.size;
	          this.page.current = resp.data.obj.current;
			  this.page.total = resp.data.obj.total;
	          this.tableData = resp.data.list;
	        })
	        .catch((error) => {});
	    },
	    setDate(row,column){
	        var newDate = row[column.property];
	        if (newDate == undefined){return ''};
	        return moment(newDate).format("YYYY-MM-DD HH:mm:ss");
	    },
		stateFormatter(row, column, cellValue, index){
		switch(cellValue){
			case 0: return '车位不可用';
			case 1: return '车位可用';
			default : console.error("错误的状态"+cellValue);
		}
		},
		updateState(row){
			let available=(row.available==0?1:0);
			let fthis=this;
			$.ajax({
				url:"http://47.104.66.120:8081//cart/updateState",
				headers:{"token":localStorage.getItem("token")},
				type:"put",
				data:{available: available,cartId:row.cartId},
				success:function (data) {
					let message="失败";
					message=data.message;
					fthis.$message({
						showClose: true,
						message: '审核'+message,
						type: 'success'
					});
					fthis.queryCart();
				}
		  })
		},
		// 下面三个方法都是分页栏的方法
		prev: function () {
			this.page.current--;
		},
		next: function () {
			this.page.current++;
		},
		search(current){
			// console.log(current);
			this.page.current=current;
		},
	  },
	  watch: {
	    page: {
	          //深度监听 监听对象中属性的变化以及集合中对象的变化
	        handler: function (novel, old) {
				this.queryCart();
	        },
	        deep: true
	    }
	  }
	};

</script>

<style>
	.el-carousel__item h3 {
	  color: #475669;
	  font-size: 18px;
	  opacity: 0.75;
	  line-height: 300px;
	  margin: 0;
	}
	
	.el-carousel__item:nth-child(2n) {
	  background-color: #99a9bf;
	}
	
	.el-carousel__item:nth-child(2n + 1) {
	  background-color: #d3dce6;
	}

</style>
